import { useState } from "react";
import { increment, decrement, incrementByTimeout } from "./redux/action";
import { connect } from "react-redux";

function App(props) {
  // 收集表单数据
  const [val, setVal] = useState(1);
  const handleChange = (e) => {
    setVal(+e.target.value);
  };

  // 更新：加
  const handleIncrement = () => {
    props.increment(val);
  };

  const handleDecrement = () => {
    props.decrement(val);
  };

  const handleIncrementByOdd = () => {
    if (props.count % 2 === 1) {
      props.increment(val);
    }
  };

  const handleIncrementByTimeout = () => {
    props.incrementByTimeout(val);
  };

  return (
    <>
      <h1>点击次数：{props.count}</h1>
      <select onChange={handleChange}>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
      <button onClick={handleIncrement}>增加</button>
      <button onClick={handleDecrement}>减少</button>
      <button onClick={handleIncrementByOdd}>奇数增加</button>
      <button onClick={handleIncrementByTimeout}>延长1s增加</button>
    </>
  );
}

// connect 高阶组件：本质上是一个函数，执行函数接受组件作为参数，返回值是一个新组件

// 过去读取store数据：store.getState()  现在可以通过props方式读取
// 过去更新store数据：1. 调用action函数生成action对象 2. 调用dispatch方法触发更新  现在调用一个方法即可完成

// 将store中的数据映射到组件的props
// const mapStateToProps = (state) => {
//   return {
//     count: state,
//   };
// };

// // 重新封装更新数据方法，映射到组件的props
// const mapDispatchToProps = (dispatch) => {
//   return {
//     increment(val) {
//       const action = increment(val);
//       dispatch(action);
//     },
//     decrement(val) {
//       dispatch(decrement(val));
//     },
//   };
// };

// export default connect(mapStateToProps, mapDispatchToProps)(App);

// 简化1：
// export default connect(
//   (state) => ({
//     count: state,
//   }),
//   (dispatch) => ({
//     increment(val) {
//       const action = increment(val);
//       dispatch(action);
//     },
//     decrement(val) {
//       dispatch(decrement(val));
//     },
//   })
// )(App);

// 简化2：
export default connect(
  (state) => ({
    count: state,
  }),
  {
    increment,
    decrement,
    incrementByTimeout,
  }
)(App);
